<template>
  <div id="id-cart">
    <Menu />
<!--    二级路由-->
    <div class="nav-top">
      <router-link class="nav" :to="item.path" v-for="(item, index) in navList" :key="index">{{item.text}}</router-link>
    </div>
    <router-view />
    <div class="div-checkbox">
      <input v-for="(item, index) in checkReslut"  v-model="item.isChecked" :key="index" :checked="item.isChecked" type="checkbox">
      <input type="checkbox" v-model="isAll">全选
    </div>
  </div>
</template>

<script>
import Menu from '@/components/Menu'
import { mapState } from 'vuex'
export default {
  name: 'Cart',
  components: {
    Menu
  },
  data () {
    return {
      checkReslut: [
        {
          isChecked: true
        },
        {
          isChecked: false
        },
        {
          isChecked: true
        },
        {
          isChecked: false
        }
      ],
      navList: [
        {
          text: '首页',
          path: '/cart/layout'
        },
        {
          text: '收藏',
          path: '/cart/ubih'
        },
        {
          text: '我的',
          path: '/cart/wode'
        }
      ]
    }
  },
  computed: {
    ...mapState(['count']),
    isAll: {
      get () {
        return this.checkReslut.every(item => item.isChecked)
      },
      set (value) {
        this.checkReslut.forEach((item) => {
          item.isChecked = value
        })
      }
    }
  }
}
</script>

<style scoped>
.nav {
  text-decoration: none;
  background: lightgoldenrodyellow;
  flex: 1;
  padding: 1%;
  color: #5b5b5b;
  font-weight: bold;
}
.nav-top {
  display: flex;
  justify-content: space-around;
  text-align: center;
}
.active {
  font-size: 20px;
  background: bisque;
  color: lightskyblue;
}
</style>
